<!--
 * @Date: 2022-03-24 11:21:12
 * @LastEditors: wuyuxin
 * @LastEditTime: 2022-03-24 16:31:50
 * @FilePath: \Vue3-code\05_composition_api\src\02_compositionAPI基础\Home.vue
 * @description: 文件描述
-->
<template>
  <div>
    Home Page
    <h2>{{message}}</h2>
    <h2>当前计数: {{state.counter}}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
  import { reactive } from 'vue'
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    },
    setup() {
      const state = reactive({
        counter: 100
      })

      // 局部函数
      const increment = () => {
        state.counter++;
        console.log(counter);
      }

      return {
        title: "Hello Home",
        state,
        increment
      }
    }
  }
</script>

<style scoped>

</style>